<template>
    <el-form :model="detailForm" ref="detailForm" label-position="right">
        <!--        <el-row :gutter="20">-->
        <!--            <el-col :span="12">-->
        <el-card class="box-card">
            <div slot="header" class="header-card">
                <span class="header-card-title">GPS续费预警配置</span>
            </div>
            <el-row >
                <el-col :span="24" class="col-wrap">
                    <el-switch v-model="detailForm.gpsExpireEnable"></el-switch>
                    <el-form-item label-width="200px" label="GPS到期时间提前预警规则:" prop="gpsExpireRule" class="text-day"
                                  :rules="{
                                         required: detailForm.gpsExpireEnable,
                                         message: '请选择GPS到期时间提前预警规则',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, detailForm.gpsExpireRule, callback)
                                       }">
                        <el-select filterable v-model="detailForm.gpsExpireRule" clearable
                                   style="width: 100%">
                            <el-option label="30天" :value="1" :key="1"></el-option>
                            <el-option label="15天" :value="2" :key="2"></el-option>
                            <el-option label="一周" :value="3" :key="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <span class="text-day">天</span>
                </el-col>
            </el-row>
        </el-card>
        <!--            </el-col>-->
        <!--            <el-col :span="12">-->
        <el-card class="box-card">
            <div slot="header" class="header-card">
                <span class="header-card-title">GPS排查预警配置</span>
            </div>
            <el-row >
                <el-col :span="24" class="col-wrap" v-for="(item, index) in detailForm.checkList" :key="`checkList_${index}`">
                    <el-switch v-model="item.gpsAlarmEnable"></el-switch>
                    <el-form-item label-width="115px" label="报警类型:" prop="gpsAlarmType" class="text-day"
                                  :rules="{
                                         required: item.gpsAlarmEnable,
                                         message: '请选择报警类型',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, item.gpsAlarmType, callback)
                                       }">
                        <el-select placeholder="请选择报警类型" filterable v-model="item.gpsAlarmType" clearable>
                            <template v-for="dict in dict.type.gps_alarm_type">
                                <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                            </template>
                        </el-select>
                    </el-form-item>

                    <el-form-item label-width="130px" label="提前预警天数:" prop="gpsAlarmPreDay" class="text-day"
                                  :rules="{
                                         required: item.gpsAlarmEnable,
                                         message: '请选择提前预警天数',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, item.gpsAlarmPreDay, callback)
                                       }">
                        <el-select filterable v-model="item.gpsAlarmPreDay" clearable
                                   style="width: 100%">
                            <el-option label="30天" :value="1" :key="1"></el-option>
                            <el-option label="15天" :value="2" :key="2"></el-option>
                            <el-option label="一周" :value="3" :key="3"></el-option>
                            <el-option label="当天" :value="4" :key="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <span class="text-day">天</span>

                    <i class="el-icon-circle-plus-outline icon_add" v-if="index===detailForm.checkList.length-1"
                       @click="add(index, 0)"></i>
                    <i v-else class="el-icon-remove-outline icon_add"
                       @click="sub(index, 0)"></i>
                </el-col>

                <el-col :span="24" style="height: 15px"></el-col>

                <el-col :span="24" class="col-wrap" v-for="(item, index) in detailForm.stateList" :key="`stateList_${index}`">
                    <el-switch v-model="item.gpsStateEnable"></el-switch>
                    <el-form-item label-width="115px" label="GPS状态:" prop="gpsState" class="text-day"
                                  :rules="{
                                         required: item.gpsStateEnable,
                                         message: '请选择GPS状态',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, item.gpsState, callback)
                                       }">
                        <el-select placeholder="请选择GPS状态" filterable v-model="item.gpsState" clearable>
                            <template v-for="dict in dict.type.gps_state">
                                <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                            </template>
                        </el-select>
                    </el-form-item>

                    <el-form-item label-width="130px" label="状态持续时长:" prop="gpsStateDuration" class="text-day"
                                  :rules="{
                                         required: item.gpsStateEnable,
                                         message: '请选择状态持续时长',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, item.gpsStateDuration, callback)
                                       }">
                        <el-select filterable v-model="item.gpsStateDuration" clearable
                                   style="width: 100%">
                            <el-option label="30天" :value="1" :key="1"></el-option>
                            <el-option label="15天" :value="2" :key="2"></el-option>
                            <el-option label="一周" :value="3" :key="3"></el-option>
                            <el-option label="当天" :value="4" :key="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <span class="text-day">天</span>

                    <el-form-item label-width="130px" label="提前预警天数:" prop="gpsPreAlarmDay" class="text-day"
                                  :rules="{
                                         required: item.gpsStateEnable,
                                         message: '请选择提前预警天数',
                                         trigger: 'change',
                                         validator: (rule, value, callback) => validData(rule, item.gpsPreAlarmDay, callback)
                                       }">
                        <el-select filterable v-model="item.gpsPreAlarmDay" clearable
                                   style="width: 100%">
                            <el-option label="30天" :value="1" :key="1"></el-option>
                            <el-option label="15天" :value="2" :key="2"></el-option>
                            <el-option label="一周" :value="3" :key="3"></el-option>
                            <el-option label="当天" :value="4" :key="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <span class="text-day">天</span>

                    <i class="el-icon-circle-plus-outline icon_add" v-if="index===detailForm.stateList.length-1"
                       @click="add(index, 1)"></i>
                    <i v-else class="el-icon-remove-outline icon_add"
                       @click="sub(index, 1)"></i>
                </el-col>
            </el-row>
        </el-card>
        <!--            </el-col>-->
        <!--        </el-row>-->


    </el-form>
</template>

<script>
import {v1 as uuid_v1} from "uuid";

export default {
    name: "GPSWarning",
    dicts:['gps_alarm_type', 'gps_state'],
    data() {
        return {
            detailForm: {
                checkList:[{}],
                stateList:[{}],
            }
        };
    },

    methods: {
        add(index, type){
            if(0===type){
                this.detailForm.checkList.splice(index + 1, 0, {})
            }else if(1===type){
                this.detailForm.stateList.splice(index + 1, 0, {})
            }
            this.$forceUpdate()
        },
        sub(index, type) {
            if(0===type){
                this.detailForm.checkList.splice(index, 1)
            }else if(1===type){
                this.detailForm.stateList.splice(index, 1)
            }
            this.$forceUpdate()
        },
        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.box-card{
    margin-bottom: 15px;
}

.col-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: flex-start;
}

.text-day {
    margin-left: 10px;
    font-size: 14px;
}

.el-form-item--small.el-form-item {
    margin-bottom: 0 !important;
}

.icon_add{
    cursor: pointer;
    margin-left: 10px;
}

</style>
